<template>
  <!-- 海报 -->
  <div class="poster" v-show="isShow">
    <div
      style="
        width: 70vw;
        height: 740px;
        position: absolute;
        z-index: 999;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #ffffff;
      "
    >
      <div
        style="
          display: block;
          width: 100%;
          font-size: 20px;
          color: #222222;
          text-align: center;
          padding: 20px 0;
        "
      >
        百变海报
      </div>
      <div
        style="position: absolute; right: 0; top: 0; padding: 20px; cursor: pointer"
        @click="close"
      >
        <el-icon size="18" color="#666666">
          <CloseBold />
        </el-icon>
      </div>
      <iframe
        style="width: 100%; height: 100%; border-radius: 8px"
        :src="linkUrl"
        frameborder="0"
      ></iframe>
    </div>
    <!-- 关闭 -->
    <div @click="close" class="model"></div>
  </div>
</template>
<script>
import { useUserStoreHook } from '@/store/modules/user'
import { CloseBold } from '@element-plus/icons-vue'

export default {
  props: {
    objItem: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      CloseBold,
      linkUrl: '',
      token: '',
      isShow: false
    }
  },
  created() {
    const userStore = useUserStoreHook()
    this.token = userStore.token
    let url =
      import.meta.env.VITE_USER_NODE_ENV == 'prod'
        ? window.location.origin
        : window.location.origin
    this.linkUrl = `${url}/user/#/pages/poster/poster?key=pc&token=${this.token}&content_id=${this.objItem.content_id}&t=${new Date().getTime()}`
    this.isShow = true
  },
  methods: {
    // 关闭弹窗
    close() {
      this.$emit('getPoster')
    }
  }
}
</script>
<style lang="scss" scoped>
.poster {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .model {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
